<template>
  <div id="container" class="map">
    <dv-loading style="position: absolute;z-index: 9999;color:white;" v-show="showLoading">Loading...</dv-loading>
    <picture-viewer ref="imageViewer2"></picture-viewer>
  </div>

</template>

<script>
  import {SLOPE_MAP, DAMAGE_MAP} from "@/utils/constant";
  import {
    getLocalStorageItem,
    setLocalStorageItem,
  } from "@/utils/storage-helper";
  import PictureViewer from "@/components/picture-viewer/index-name";
  import AMap from 'AMap'
  import {getSlopeMapData, getDamageMapData, getSlopeMapDataById, getDamageMapDataById} from '@/services/model/data-board'
  import constUrl from '@/services/env'
  import {
    PAGE_RISK,
    PAGE_TROUBLESHOOT,
    PAGE_OVERVIEW,
    PAGE_MONITOR,
    PAGE_MONITOR_1,
    PAGE_MONITOR_2,
    PAGE_MONITOR_3,
    PAGE_MONITOR_4,
    PAGE_MONITOR_5,
    PAGE_DAMAGE,
    PAGE_ASSESS,
    PAGE_MAINTENANCE,
    PAGE_FILES
  } from '@/utils/constant'
  import Vue from "vue";

  // 地图渲染的图标
  const CURRENT_ICON_MAP = {
    [PAGE_RISK]: require('../imgs/icon5-2.png'),
    [PAGE_DAMAGE]: require('../imgs/damage_map_icon.png'),
    [PAGE_TROUBLESHOOT]: require('../imgs/icon3-2.png'),
    [PAGE_OVERVIEW]: require('../imgs/icon2-2.png'),
    [PAGE_MONITOR_1]: require('../imgs/waring_level1.png'),
    [PAGE_MONITOR_2]: require('../imgs/waring_level2.png'),
    [PAGE_MONITOR_3]: require('../imgs/waring_level3.png'),
    [PAGE_MONITOR_4]: require('../imgs/waring_level4.png'),
    [PAGE_MONITOR_5]: require('../imgs/waring_level5.png'),
    [PAGE_ASSESS]: require('../imgs/assess_map_icon.png'),
    [PAGE_MAINTENANCE]: require('../imgs/icon_qu_select.png'),
    [PAGE_FILES]: require('../imgs/files_map_icon2.png')
  }
  // 渲染模板
  const HTML_CONT = {
    [PAGE_DAMAGE]: (item) => {
      return `<div class="board_map-market">
      <p class="market_title">${item.name}
        <span class="${item.regionName ? '' : 'none_title'}" ><br/>${item.regionName}</span>
      </p>
      <p class="${item.regionName ? 'none_title' : 'market_info'}" style="color:${LEVEL_COLOR_MAP[item.damageRiskLevel]}">${item.damageRiskLevelName}</p>
    </div>`
    },
    [PAGE_RISK]: (item) => {
      return `<div class="board_map-market">
      <p class="market_title">${item.name}</p>
      <p class="market_info" style="color:${LEVEL_COLOR_MAP[item.slopeRiskLevel]}">${item.slopeRiskLevelName}</p>
    </div>`
    },
    [PAGE_TROUBLESHOOT]: (item) => {
      return `<div class="board_map-market">
      <p class="market_title">${item.name}</p>
      <p class="market_info" style="color:${LEVEL_COLOR_MAP[item.techniqueType]}">${item.techniqueTypeName}</p>
    </div>`
    },
    [PAGE_OVERVIEW]: (item) => {
      return `<div class="board_map-market">
      <p class="market_title">${item.name}</p>
    </div>`
    },
    [PAGE_MONITOR]: (item) => {
      return `<div class="board_map-market">
<!--      <p class="market_title">${item.name}</p>-->
<!--      <p class="market_info" style="color:${LEVEL_COLOR_MAPs[item.warningLevel]}">${item.warningLevelName}</p>-->
    </div>`
    },
    [PAGE_ASSESS]: (item) => {
      return `<div class="board_map-market">
      <p class="market_title">${item.name}</p>
       <p class="${item.techniqueTypeName ? 'market_info' : 'none_title'} " style="color:${LEVEL_COLOR_MAP[item.techniqueType]}">${item.techniqueTypeName}</p>
    </div>`
    },
    [PAGE_MAINTENANCE]: (item) => {
      return `<div class="board_map-market">
      <p class="market_title">${item.name}</p>
    </div>`
    },
    [PAGE_FILES]: (item) => {
      return `<div class="board_map-market">
      <p class="market_title">
        ${item.name}
       <span class="${item.regionName ? '' : 'none_title'}" ><br/>${item.regionName}</span>
      </p>
    </div>`
    }
  }
  // 等级颜色
  const LEVEL_COLOR_MAP = {
    0: '#0DC26B',
    1: '#0073b7',
    2: '#f39c12',
    3: '#ff851b',
    4: '#e43321'
  }
  const LEVEL_COLOR_MAPs = {
    1: '#0DC26B',
    2: '#0073b7',
    3: '#f39c12',
    4: '#ff851b',
    5: '#e43321'
  }
  export default {
    components: {PictureViewer},
    data() {
      return {
        showLoading: true,
        cluster: null, // 点聚合实例model
        constUrl,
        map: null,
        // 点标记集合
        markerList: [],
        showMapList: [],
        showCityMapList: [],
        showAreaMapList: [],
        showDataMapList: [],
        slopeMapDataList: [],
        damageMapDataList: [],
        cityLonLat: [
          {name: '贵阳市', region: '520100', longitude: 106.626299, latitude: 26.650945},
          {name: '遵义市', region: '520300', longitude: 107.030047, latitude: 27.721026},
          {name: '六盘水市', region: '520200', longitude: 104.813555, latitude: 26.577278},
          {name: '安顺市', region: '520400', longitude: 105.934161, latitude: 26.247654},
          {name: '毕节市', region: '520500', longitude: 105.263995, latitude: 27.258097},
          {name: '铜仁市', region: '520600', longitude: 109.208086, latitude: 27.735613},
          {name: '黔西南布依族苗族自治州', region: '522300', longitude: 104.879473, latitude: 25.352515},
          {name: '黔东南苗族侗族自治州', region: '522600', longitude: 107.977618, latitude: 26.739282},
          {name: '黔南布依族苗族自治州', region: '522700', longitude: 107.538164, latitude: 26.400284},
          {name: '贵安新区', region: '520700', longitude: 106.354388, latitude: 26.447017},
        ],
        // 是否展示弹窗
        isShowDialog: false,
        // 点聚合实例
        markerClusterer: null,
        colors: {}
      }
    },
    computed: {
      tabValue() {
        return this.$route.name
      }
    },
    watch: {
      tabValue: 'getMarks'
    },
    methods: {
      /**
       * 附近位置最大最小经纬度计算
       * @param   longitude  经度
       * @param   latitude   纬度
       * @param   distince    距离（千米）
       * @returns {maxlat: *, minlat: number, minlng: number, maxlng: *}
       */
      getMaxMinLongitudeLatitude(longitude, latitude, distince) {
        let r = 6371.393;    // 地球半径千米
        let lng = longitude;
        let lat = latitude;
        let dlng = 2 * Math.asin(Math.sin(distince / (2 * r)) / Math.cos(lat * Math.PI / 180));
        dlng = dlng * 180 / Math.PI;// 角度转为弧度
        let dlat = distince / r;
        dlat = dlat * 180 / Math.PI;
        let minlat = lat - dlat;
        let maxlat = parseFloat(lat + dlat).toFixed(10);
        let minlng = lng - dlng;
        let maxlng = parseFloat(lng + dlng).toFixed(10);
        return {minlng: minlng, maxlng: maxlng, minlat: minlat, maxlat: maxlat}
      },
      init1(city) {//区域遮盖
        var that = this
        if (that.polygon) {
          that.map.remove(that.polygon)
        }
        AMap.plugin('AMap.DistrictSearch', function () {
          new AMap.DistrictSearch({
            extensions: 'all',
            subdistrict: 0
          }).search(city, function (status, result) {// 外多边形坐标数组和内多边形坐标数组
            var outer = [
              new AMap.LngLat(-560, 190, true),
              new AMap.LngLat(-160, -190, true),
              new AMap.LngLat(160, -190, true),
              new AMap.LngLat(560, 190, true)
            ]
            var holes = result.districtList[0].boundaries
            var pathArray = [outer]
            pathArray.push.apply(pathArray, holes)
            that.polygon = new AMap.Polygon({
              pathL: pathArray,
              strokeColor: '#5DFFF6',//城市边界颜色
              strokeWeight: 3,
              fillColor: '#191f36', // 遮罩背景色黑色
              fillOpacity: 0.8
            })
            that.polygon.setPath(pathArray)
            that.map.add(that.polygon)
          })
        })
        // that.map.setZoom(10) // 设置地图层级
      },
      refresh(deptTreeId, roadId, typeCode, slopeId) {
        this.showLoading = true
        this.queryMapList(deptTreeId, roadId, typeCode, slopeId)
        this.deptTreeId = deptTreeId || ''
        this.slopeId = roadId || ''
        this.roadId = roadId || ''
      },
      // 初始化地图
      initMap() {
        this.map = new AMap.Map('container', {
          resizeEnable: true,
          center: [107.30962550, 26.705642755],
          layers: [
            // 卫星
            new AMap.TileLayer.Satellite(),
            // 路网
            new AMap.TileLayer.RoadNet()
          ],
          // mapStyle: 'amap://styles/dark',
          zoom: 8
        })
        let that = this
        this.map.on('zoomend', function (e) {
          let arr = that.map.getCenter().toString().split(',');
          let range = []
          //展示市级地图
          if (that.map.getZoom() <= 9) {
            that.showAreaMapList = []
            that.getMarks(false, that.showCityMapList, null, 0)
            //展示区级地图
          } else if (that.map.getZoom() && that.map.getZoom() < 12) {
            that.showDataMapList = []
            range = that.getMaxMinLongitudeLatitude(arr[0], arr[1], 50)
            if (that.showAreaMapList.length === 0) {
              //没有点击过，通过鼠标所在经纬度获取匹配的城市
              that.showCityMapList.map(x => {
                if (range.minlng <= x.longitude && x.longitude <= range.maxlng && range.minlat <= x.latitude && x.latitude <= range.maxlat) {
                  that.showAreaMapList = x.child
                }
              })
            }
            that.getMarks(false, that.showAreaMapList, null, 0)
          }

          //   //展示具体点
          // } else if (that.map.getZoom() && that.map.getZoom() > 12) {
          //   range = that.getMaxMinLongitudeLatitude(arr[0], arr[1], 10)
          //   if (that.showDataMapList.length === 0) {
          //     //没有点击过，通过鼠标所在经纬度获取匹配的城市
          //     that.showAreaMapList.map(x => {
          //       if (range.minlng <= x.longitude && x.longitude <= range.maxlng && range.minlat <= x.latitude && x.latitude <= range.maxlat) {
          //         that.showDataMapList = x.child
          //       }
          //     })
          //   }
          //   that.getMarks(false, that.showDataMapList, null, 1)
        });
        this.init1('贵州省')
        this.initPro(520000, 0)
      },
      markDataHandle(item) {
        if (item.level) {
          this.map.setCenter([item.longitude, item.latitude])
          if (item.level === 1) {
            this.map.setZoom(10)
            this.showAreaMapList = item.child
            this.getMarks(false,item.child, null,0)
          } else if (item.level === 2) {
            this.map.setZoom(12)
            this.showDataMapList = item.child
            this.getMarks(false,item.child, null, 1)
          }
        } else {
          item.map(x => {

          })
        }
      },
      // 创建区域图层
      initPro(code, dep) {
        let that = this
        this.disProvince && disProvince.setMap(null)
        AMap.plugin(['AMap.DistrictLayer'], () => {
          this.disProvince = new AMap.DistrictLayer.Province({
            zIndex: 12,
            adcode: [code],
            depth: dep,
            styles: {
              fill: function (properties) {
                var adcode = properties.adcode
                return that.getColorByAdcode(adcode)
              },
              'province-stroke': 'cornflowerblue',
              'city-stroke': 'white', // 中国地级市边界
              'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
            }
          })
          this.disProvince.setMap(this.map)
        })

      },
      // 颜色辅助方法
      getColorByAdcode(adcode) {
        if (!this.colors[adcode]) {
          // var gb = Math.random() * 155
          this.colors[adcode] = 'rgba(' + 255 + ',' + 255 + ',255, 0.01)'
        }
        return this.colors[adcode]
      },
      // 查询地图数据
      async queryMapList(deptTreeId, roadId, typeCode, slopeId, refreshCache) {
        this.showLoading = true
        let action = this.tabValue === 'damage' ? getDamageMapData : getSlopeMapData
        let polymerization = this.tabValue === 'damage' ? 1 : 0
        let mapData = []
        if (this.tabValue === 'files' || this.tabValue === 'assess') {
          // mapData = getLocalStorageItem(SLOPE_MAP);
          // if (!mapData || mapData === null || refreshCache || typeCode || typeCode !== null) {

          let code = typeCode
          let code2 = typeCode
          const {data} = this.tabValue === 'files'? await action({deptTreeId, roadId, slopeId,code2}):await action({deptTreeId, roadId, slopeId,code})
          //修改城市经纬度
          data.map(x => {
            this.cityLonLat.map(y => {
              if (x.region === y.region) {
                x.longitude = y.longitude
                x.latitude = y.latitude
              }
            })
          })
          mapData = data
          this.showCityMapList = mapData
          // setLocalStorageItem(SLOPE_MAP, data, 1);
          // }
        } else {
          // mapData = getLocalStorageItem(DAMAGE_MAP);
          // if (!mapData || mapData === null || refreshCache || typeCode || typeCode !== null ) {
          let code = typeCode
          const {data} = await action({deptTreeId, roadId, slopeId, code})
          //修改城市经纬度
          data.map(x => {
            this.cityLonLat.map(y => {
              if (x.region === y.region) {
                x.longitude = y.longitude
                x.latitude = y.latitude
              }
            })
          })
          mapData = data
          this.showCityMapList = mapData
          // setLocalStorageItem(DAMAGE_MAP, data, 1);
        }
        // }
        this.getMarks(true, mapData, typeCode, polymerization)
      },
      // 查看大图
      previewImg(index, urls) {
        this.$refs.imageViewer.showViewer(urls.map(x => _this.constUrl + x.url), index)
      }
      ,
      // 查询地图数据
      getMarks(init, list, typeCode, polymerization) {
        if (init) {
          this.map.setZoom(8)
          this.map.setCenter([107.30962550, 26.705642755])
        }
        let mapDataList = list || []
        if(typeof list === "string"){
          mapDataList = []
        }
        this.showMapList = mapDataList
        //清空marker，避免页面卡死
        // 信息窗口
        let _this = this
        this.markerClusterer?.removeMarkers(this.markerList)
        this.map.remove(this.markerList)
        this.showLoading = false
        let content =
          `<el-card class="box-card">
           <a @click="btnClose" class="btn-close amap-ui-infowindow-close amap-ui-smp-ifwn-def-tr-close">&#10006;</a>
           <div class="title ">{{windowInfoData.typeName}}详情<span style="float: right">{{windowInfoData.weather.weather}};{{windowInfoData.weather.temperature}}℃;{{windowInfoData.weather.humidity}}%</span></div>
                <ul>
                <li><span class="map_label_view" >{{windowInfoData.typeName}}名称：</span><span>{{windowInfoData.name}}</span></li>
                <li><span class="map_label_view" >{{windowInfoData.typeName}}编号：</span><span>{{windowInfoData.uniqueNo}}</span></li>
                <li><span class="map_label_view" >管养单位：</span><span>{{windowInfoData.deptName}}</span></li>
                <li><span class="map_label_view" >所属路线：</span><span>{{windowInfoData.roadName}}</span></li>
                <li><span class="map_label_view" >起止桩号：</span><span>{{windowInfoData.startPointStakeNum}}~{{windowInfoData.endPointStakeNum}}</span></li>
                <li>
                <el-row v-if="windowInfoData.typeName === '边坡'">
                    <el-col :span="8">
                    <span class="map_label_view" >高度：</span><span>{{windowInfoData.height}}m</span>
                    </el-col>
                    <el-col :span="8">
                    <span class="map_label_view" >长度：</span><span>{{windowInfoData.slopeLength}}m</span>
                    </el-col>
                    <el-col :span="8">
                    <span class="map_label_view" >类型：</span><span>{{windowInfoData.slopeTypeName}}</span>
                    </el-col>
                </el-row>
                </li>
                 <li>
                <el-row>
                    <el-col :span="12" v-if="windowInfoData.typeName === '边坡'">
                    <span class="map_label_view" >技术等级:</span><span class="level_view" :style="gradeColor(windowInfoData.techniqueType)">{{windowInfoData.techniqueTypeName}}</span>
                    </el-col>
                    <el-col   v-if="windowInfoData.typeName === '边坡'" :span="12">
                    <span class="map_label_view" >风险等级:</span><span class="level_view" :style="gradeColor(windowInfoData.slopeRiskLevel)">{{windowInfoData.slopeRiskLevelName}}</span>
                    </el-col>
                     <el-col   v-else :span="24">
                    <span class="map_label_view" >风险等级:</span><span class="level_view" :style="gradeColor(windowInfoData.damageRiskLevel)">{{windowInfoData.damageRiskLevelName}}</span>
                    </el-col>
                </el-row>
              <div v-if="windowInfoData.warningLevelName">
                   <span class="map_label_view" >监测等级:</span><span class="level_view" :style="gradeMonitorColor(windowInfoData.warningLevel)">{{windowInfoData.warningLevelName}}</span>
              </div>
                </li>
                </ul>

          <div class="info-btn" v-if="windowInfoData.monitorRes!==null && windowInfoData.monitorRes.monitorPointList.length!==0"">
                <el-divider content-position="left"><span style="font-size: 13px;color: #1990FE">监测类型</span></el-divider>
                <el-button type="success" class="btn-item" @click="toControl(item,windowInfoData.monitorRes.projectId)" v-for="item in windowInfoData.monitorRes.monitorPointList" size="small">{{item.monitorTypeName}}</el-button>
          </div>
        <div class="demo-image__lazy" style="height:160px" v-if="windowInfoData.picList&&windowInfoData.picList.length!==0">
         <el-carousel trigger="click"  height="150px">
          <el-carousel-item v-for="(item,index) in windowInfoData.picList" :key="index">
           <el-image style="height:150px;width:100%"  @click.stop="previewImg(index,windowInfoData.picList)" :src="constUrl+item.url" fit="cover"></el-image>
          </el-carousel-item>
        </el-carousel>
        </div>
        <picture-viewer ref="imageViewer"></picture-viewer>
        </div>
        </el-card>`
        let MyComponent = Vue.extend({
          template: content,
          components: {PictureViewer},
          data() {
            return {
              constUrl: '',
              msg: '边坡详情',
            }
          },
          props: {
            windowInfoData: {
              type: Object
            }
          },
          methods: {
            gradeMonitorColor(val) {
              switch (val) {
                case 1:
                  return 'background-color:#0DC26B;color:white'
                case 2:
                  return 'background-color:#0073b7;color:white'
                case 3:
                  return 'background-color:#f39c12;color:white'
                case 4:
                  return 'background-color:#ff851b;color:white'
                case 5:
                  return 'background-color:#e43321;color:white'
                default:
                  return 'background-color:#e43321;color:white'
              }
            },
            gradeColor(val) {
              switch (val) {
                case 0:
                  return 'background-color:#0DC26B;color:white'
                case 1:
                  return 'background-color:#0073b7;color:white'
                case 2:
                  return 'background-color:#f39c12;color:white'
                case 3:
                  return 'background-color:#ff851b;color:white'
                case 4:
                  return 'background-color:#e43321;color:white'
                default:
                  return 'background-color:#e43321;color:white'
              }
            },
            // 查看大图
            previewImg(index, urls) {
              const urlList = JSON.parse(JSON.stringify(urls));
              urlList.map((x) => {
                x.url = this.constUrl + x.url;
                return x;
              });
              // 显示照片查看器
              this.$refs.imageViewer.showViewer(urlList, index);
            },
            toControl(val, projectId) {
              _this.$router.push({
                path: `/project/${projectId}/work-point/${val.workPointId}/monitor/${val.monitorType}?activeId=${val.id}`
              })
            },
            btnClose() {
              _this.infoWindow.close(_this.map)
            },
          },
          created() {
            this.constUrl = _this.constUrl
          },
          mounted() {
            window.addEventListener("click", this.btnClose);
          }
        })
        this.markerList = []
        mapDataList.map(x => {
          const {longitude, latitude, roadName} = x
          if (longitude && latitude) {
            x.warningLevel = this.tabValue === 'monitors' ? x.warningLevel : ''
            const marker = new AMap.Marker({
              position: [longitude, latitude],
              icon: CURRENT_ICON_MAP[this.tabValue + x.warningLevel],
              offset: new AMap.Pixel(-18, -36),
              extData: x,
              iconLabel: 'test'
            })
            marker.setLabel({
              offset: new AMap.Pixel(5, 20),  //设置文本标注偏移量
              content: HTML_CONT[this.tabValue](x), //设置文本标注内容
              direction: 'top' //设置文本标注方位
            });
            // 监听单个点点击事件
            AMap.event.addListener(marker, 'click', async e => {
              AMap.plugin('AMap.Weather', async function () {
              })
              //创建天气查询实例
              var weather = new AMap.Weather();
              //执行实时天气信息查询
              let extData = e.target.getExtData()
              //点击后放大地图
              //改变中心点
              this.map.setCenter([extData.longitude, extData.latitude])
              //判断标点级别
              if (extData.level < 3) {
                //市级标点过滤出区级标点进行渲染
                //区级标点过滤经纬度范围内的边坡信息
                this.markDataHandle(extData)
                return
              }
              //详情弹窗和相关接口调用
              // this.zoomHandel(14)
              //查询点位详情
              this.showLoading = true
              let action = this.tabValue === 'damage' ? getDamageMapDataById : getSlopeMapDataById
              let res = await action({id: extData.id})
              this.showLoading = false
              let info = res.data
              let region = info?.regionName?.split('-') || []
              region = region.length > 0 ? region : ['贵州']
              region = region[1] ? region[1] : region[0]
              weather.getLive(region, function (err, data) {
                info.weather = data || {}
                info.region = region
                // 窗体信息
                let component = new MyComponent({ // 传参
                  propsData: {
                    windowInfoData: info
                  }
                }).$mount()
                _this.infoWindow = new AMap.InfoWindow({
                  content: component.$el, // 使用默认信息窗体框样式，显示信息内容
                  isCustom: true,
                  autoMove: true,
                  closeWhenClickMap: true,
                  retainWhenClose: true,
                  offset: new AMap.Pixel(0, -15),
                })
                _this.infoWindow.open(
                  _this.map,
                  marker.getPosition(e.lnt, e.lat)// 窗口信息的位置
                )
              })
            })
            this.markerList.push(marker)
          }
        })
        if (this.$route.params.projectId) {
          this.map.setFitView(this.markerList)// 自适应显示点标记
        }
        if (polymerization === 0) {
          this.map.add(this.markerList)
          return
        }
        this.addCluster()
      }
      ,
      zoomHandel(zoom) {
        let nowZoom = this.map.getZoom()
        if (zoom === nowZoom) {
          return
        }
        this.map.setZoom(nowZoom + 1)
        setTimeout(() => {
          this.zoomHandel(zoom)
        }, 200)
      }
      ,
      // marks样式
      addCluster() {
        // 自定义图标
        var sts = [{
          url: 'https://a.amap.com/jsapi_demos/static/images/red.png',
          size: new AMap.Size(48, 48),
          offset: new AMap.Pixel(-24, -24)
        },]
        AMap.plugin(['AMap.MarkerClusterer'], () => {
          this.markerClusterer = new AMap.MarkerClusterer(this.map, this.markerList, {
            styles: sts,
            gridSize: 80,
          })
        })
      }
      ,
    },
    activated() {
      this.map=null
      this.initMap()
    }
  }
</script>

<style lang="less">

  .data-layer {
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0.25rem;
    border: 1px solid #266BFF;
    margin-bottom: -1px;

    &::after {
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      content: '';
      display: block;
      border-top: 10px solid #266bff;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
    }

    .data-layer-title {
      line-height: 2;
      padding: 0 0.625rem;
      background: linear-gradient(to right, rgba(25, 97, 241, 1), rgba(25, 97, 241, 0));
      border-radius: 0.25rem 0.25rem 0 0;
      color: #ffffff;
      font-size: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-family: YouSheBiaoTiHei;
        white-space: nowrap;
        flex-shrink: 0;
      }

      .title_weather {
        margin-left: 8px;
        font-size: 14px !important;
        white-space: nowrap;
        flex-shrink: 0;
      }
    }
  }


  .data-layer .content {
    padding: 1.25rem 0.625rem;
    background: rgba(23, 36, 63, 0.8);
    border-radius: 0 0 0.25rem 0.25rem;
  }

  .data-layer .content p {
    color: #D5E3E8;
    font-size: 0.75rem;
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .layout-name {
    flex-shrink: 0;
    font-size: 20px;
    margin-right: 10px;
  }

  .layer-image {
    width: 80px;
    height: 80px;
    object-fit: 'fit'
  }

  .data-layer .content p .layer-num {
    white-space: nowrap;
    font-size: 1.25rem;
    color: #3BD5FD;
    font-weight: 600;
    padding-right: 1.25rem /* 20/16 */;
  }


</style>
<style lang="less" scoped>

  .map {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #0e1014;
  }

  /deep/ .box-card {

    width: 400px;
    border-radius: 0.25rem;
    border: 1px solid #266BFF;

    .btn-close {
      float: right;
      cursor: pointer;
    }

    .map_label_view {
      font-size: 15px;
      font-width: 600;
      margin-left: 10px;
      color: #1a253a;
    }

    .level_view {
      display: inline-block;
      padding: 0px 3px;
      border-radius: 3px;
      font-size: 12px;
    }

    .title {
      font-size: 20px;
      font-family: YouSheBiaoTiHei;
      white-space: nowrap;
      clear: both;
      background-color: #1a253a;
      margin-bottom: 15px;
      padding: 9px;
      color: white;
      border-radius: 5px;
    }

    .el-card__body {
      padding: 0 0.625rem;
      background: linear-gradient(to right, rgba(58, 80, 106, 0.5), #357c82);
      border-radius: 0.25rem 0.25rem 0 0;
      color: #ffffff;
      font-size: 20px;
      padding-bottom: 20px;
    }

    .el-button--success {
      color: #FFF;
      background-color: #1990FE;
      border-color: #1990FE;
    }

    .info-btn {
      margin-top: 5px;
      margin-bottom: 5px;

      .btn-item {
        margin-bottom: 7px;
        margin-right: 7px;
        background-color: #1990FE;
      }

      /deep/ .el-button + .el-button {
        margin-left: 0px;
      }
    }

    ul li {
      font-size: 13px;
      line-height: 20px;

      span:first-child {
        font-weight: bold;
      }
    }
  }
</style>
<style lang="less">
  .amap-marker-label {
    background: none;
    border: none;
  }

  .board_map-market {
    .market_title {
      background-color: #ff4d51;
      padding: 3px 5px;
      border-radius: 5px;
      color: #ffffff;
      white-space: nowrap;
      text-align: center;
      margin-left: -15px;
    }

    .none_title {
      display: none;
    }

    .market_info {
      color: #2a6ef2;
      white-space: nowrap;
      font-weight: 600;
      text-align: center;
      margin-top: 6px;
      margin-left: -20px;
    }

    & > img {
      width: 56px;
      height: 56px;
    }
  }

</style>
